<template>
  <view class="level-wrapper">
    <view class="order-search">
      <u-search placeholder="请输入等级名称" v-model="pageInfo.keyword" clearable bgColor="#fff" borderColor="#e5e5e5"
        :showAction="false" @search="handleSearch" @clear="handleReset"></u-search>
      <view class="flex-row" style="flex:2">
        <u-button type="primary" text="搜索" @click="handleSearch"></u-button>
      </view>
    </view>
    <view class="feeding-table">
      <view class="feeding-list">
        <scroll-view scroll-y="true" ref="scrollView" style="height: 100%; width: 100%"
          @scrolltolower="onScrollToLower">
          <template v-if="list.length>0">
            <view class="item-card" v-for="(item, index) in list" :key="index">
              <view class="item-card-top">
                <view class="left-area">
                  <image class="item-icon" :src="item.image" mode=""></image>
                  <view class="text-group">
                    <text class="item-name">等级名称：{{item.levelName}}</text>
                    <view class="middle-area">
                      <view class="info-item">所需成长值：{{item.minPoints}}</view>
                      <view class="info-item">当前会员人数：{{item.creator}}</view>
                      <view class="info-item">创建时间：{{ item.createDate }}</view>
                      <view class="info-item">最近更新时间：{{ item.lastUpdateDate }}</view>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 右侧：操作按钮 -->
              <view class="right-area">
                <view class="right-btn">
                  <view class="operate-btn edit" @click="handleEdit(item)">
                    <image src="@/static/imgs/edit.png" mode=""></image>
                    编辑
                  </view>
                  <view class="operate-btn" :class="{'disable':item.minPoints==0}" @click="handleDelete(item)">
                    <image src="@/static/imgs/trash-w.png" mode="" v-if="item.minPoints==0"></image>
                    <image src="@/static/imgs/trash.png" mode="" v-if="item.minPoints!=0"></image>
                    删除
                  </view>
                </view>
              </view>
            </view>

          </template>
          <template v-else>
            <view class="empty-box" style="text-align: center;padding-top: 12vh;">
              <image src="/src/static/imgs/emptyW.png" mode="widthFix" style="width: 240px;"></image>
              <view class="text1" style="color: #999;">暂无数据</view>
            </view>
          </template>
        </scroll-view>
      </view>
      <view class="detail-foot">
        <view class="foot-btn" style="margin: auto">
          <view class="order-btn" @click="contentClick">新增会员等级</view>
          <view class="order-btn" @click="levelClick">等级规则说明</view>
          <view class="order-btn" @click="vipClick">积分获取说明</view>
        </view>
      </view>
    </view>
  </view>
  <u-popup :show="show" @close="popupCancel" :round="10" mode="center">
    <view class="popup-con">
      <view class="applyfor-tit">
        确认删除会员等级「{{showInfo?.levelName}}」吗?
      </view>
      <view class="status-wrapper">
        <view class="status-title">当前状态：</view>
        <view class="dot-list">
          <view class="dot-item">关联会员：{{showInfo?.creator}}人</view>
          <view class="dot-item">所需成长值：{{showInfo?.minPoints}}</view>
        </view>
        <view class="icon-info" v-if="showInfo?.creator>0">
          <image src="@/static/imgs/link-icon.png" class="info-icon" mode="widthFix" />
          <view class="info-text">会员等级迁移：<text>系统会基于每位会员的当前成长值，匹配至对应的会员等级。</text></view>
        </view>
        <view class="icon-info">
          <image src="@/static/imgs/warn-icon.png" class="info-icon" mode="widthFix" />
          <text class="info-text">此操作不可撤销，确认是否继续删除？</text>
        </view>
      </view>

      <view class="button-group">
        <button class="cancel-btn" @click="popupCancel">取消</button>
        <button class="pay-btn" @click="popupSure">确认删除</button>
      </view>
    </view>
  </u-popup>
</template>
<script setup>
  import {
    ref,
    computed,
    onMounted,
    reactive
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getLevelPage,
    deleteLevel,
  } from '@/requests/apis/vip'
  let show = ref(false)
  let showType = ref()
  let showTitle = ref()
  let showInfo = ref()
  let itemData = ref()
  let list = ref([])
  let pageInfo = reactive({
    keyword: '',
  });
  onMounted(() => {
    getData()
  })

  const getData = async (type) => {
    uni.showLoading({
      title: '加载中',
      mask: true
    })
    let res = await getLevelPage({
      ...pageInfo
    })
    list.value = res.Result || [];
    uni.hideLoading()
  }
  const handleSearch = () => {
    getData()
  }
  const handleReset = () => {
    pageInfo.keyword = ''
    getData()
  }
  const levelClick = () => {
    uni.navigateTo({
      url: '/pages/vip/membershipLevel/levelDescription',
    })
  }
  const vipClick = () => {
    uni.navigateTo({
      url: '/pages/vip/membershipLevel/vipDescription',
    })
  }
  const contentClick = () => {
    uni.navigateTo({
      url: '/pages/vip/membershipLevel/formAdd',
    })
  }
  const handleEdit = (item) => {
    let type = ""
    if (item.minPoints == 0) {
      type = "default"
    }
    uni.navigateTo({
      url: `/pages/vip/membershipLevel/formAdd?infoList=${encodeURIComponent(
      JSON.stringify(item),
    )}&type=${type}`,
    })
  }

  const handleDelete = (item) => {
    if (item.minPoints == 0) {
      return
    }
    show.value = true;
    showType.value = 1;
    showInfo.value = item;
    itemData.value = item

  }
  // 弹窗取消
  const popupCancel = () => {
    show.value = false
  }
  // 弹窗确认
  const popupSure = () => {
    show.value = false
    if (showType.value == 1) {
      deleteLevel({
          ids: [itemData.value.id],
        })
        .then((a) => {
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000,
            success() {
              setTimeout(() => {
                getData()
              }, 2000)
            },
          })
        })
        .catch((error) => {
          uni.hideLoading()
        })
    }
  }
</script>
<style lang="scss" scoped>
  .popup-con {
    width: 47vw;
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;

    .applyfor-tit {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      text-align: center;
      padding-top: 30px;
      box-sizing: border-box;
    }

    .status-wrapper {
      padding: 18px 82px 20px 43px;
      box-sizing: border-box;

      .status-title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        margin-bottom: 3px;
      }

      // 带圆点的列表
      .dot-list {
        margin-bottom: 16px;

        .dot-item {
          position: relative;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          padding-left: 12px;
          margin-bottom: 8px;
          line-height: 1.5;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #0F90FD;
          }
        }
      }

      // 带图标说明行
      .icon-info {
        display: flex;
        align-items: flex-start;
        margin-bottom: 18px;

        .info-icon {
          width: 18px; // 图标宽度，按需调整
          height: 18px;
          margin-right: 8px;
          margin-top: 5px; // 与文字垂直对齐
        }

        .info-text {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          line-height: 25px;

          text {
            color: #666666;
          }
        }
      }
    }

    .button-group {
      display: flex;
      padding: 0 110px 20px;
      box-sizing: border-box;
    }

    .cancel-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #EFEFEF;
      border-radius: 21px;
      margin-right: 30rpx;
      font-weight: 400;
      font-size: 14px;
      color: #222222;

      &::after {
        content: " ";
        border: none;
      }
    }

    .pay-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #FF796D;
      border-radius: 21px;
      font-weight: 400;
      font-size: 14px;
      color: #fff;

      &::after {
        content: " ";
        border: none;
      }
    }
  }

  .level-wrapper {
    display: flex;
    // flex: 1;
    overflow: hidden;
    flex-direction: column;
    height: 100%;


    .order-search {
      display: flex;
      background-color: #fff;
      margin: 10px 10px 0;
      padding: 12px 145px 12px 20px;
      box-sizing: border-box;

      :deep(button) {
        width: 74px;
        height: 38px;
        margin-left: 11px;
        margin-right: 0;
        border-radius: 100px;
      }
    }

    .feeding-table {
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;


      .feeding-list {
        flex: 1;
        overflow: hidden;

        .item-card {
          padding: 21px 10px 10px 22px;
          box-sizing: border-box;
          border-radius: 8px;
          margin: 10px;
          background: #FFFFFF;

          .item-card-top {
            display: flex;
          }

          .left-area {
            display: flex;
            align-items: center;
            width: 100%;

            .item-icon {
              width: 40px;
              height: 40px;
              margin-right: 19px;
            }

            .text-group {
              display: flex;
              flex-direction: column;
              flex: 1;

              .item-name {
                font-weight: 500;
                font-size: 16px;
                color: #333333;
                line-height: 22px;
                margin-bottom: 6px;
              }

              .middle-area {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 38px;
                font-size: 14px;
                color: #666;

                .info-item {
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                  white-space: nowrap;
                }
              }
            }
          }


          /* 右侧区域：操作按钮 */
          .right-area {
            display: flex;
            justify-content: flex-end;

            .right-btn {
              display: flex;
              gap: 10px;
            }

            .operate-btn.disable {
              background: #D1D1D1;
              color: #fff;
            }

            .operate-btn {
              display: flex;
              align-items: center;
              padding: 6px 12px;
              border-radius: 4px;
              box-sizing: border-box;
              font-weight: 400;
              font-size: 14px;
              color: #0F90FD;
              background: rgba(15, 144, 253, 0.1);
              border-radius: 100px;
              margin-top: 12px;

              image {
                width: 16px;
                height: 16px;
                margin-right: 2px;
              }
            }
          }
        }
      }

      .detail-foot {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: auto;
        position: static;
        bottom: 0;
        background: #ffffff;
        box-shadow: 0px -2px 4px 0px rgba(51, 70, 129, 0.1);
        border-radius: 10px;
        height: 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
      }
    }
  }
</style>
